import React from "react";
import Header from "./header";
import Bottom from "./bottom";
import "../css/main.less"
import {Swiper} from "antd-mobile";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            goods:[
                {
                    image:"/static/media/image/1.jpg",
                    title:"水果生日蛋糕",
                    price:"￥69.9",
                    sellnum: 170
                },

                {
                    image:"/static/media/image/2.jpg",
                    title:"小龙虾",
                    price:"￥49.9",
                    sellnum: 1994
                },

                {
                    image:"/static/media/image/3.jpg",
                    title:"永恒砖石",
                    price:"￥5099",
                    sellnum: 164
                },

                {
                    image:"/static/media/image/4.jpg",
                    title:"BB洗发液",
                    price:"￥69.9",
                    sellnum: 8699
                },

                {
                    image:"/static/media/image/5.jpg",
                    title:"澄阳湖大闸蟹",
                    price:"￥169.9",
                    sellnum: 504
                },

                // {
                //     image:"/static/media/image/6.jpg",
                //     title:"生态鸡蛋",
                //     price:"￥29.9"
                // },

                {
                    image:"/static/media/image/7.jpg",
                    title:"碧根果",
                    price:"￥29.9",
                    sellnum: 9347
                },

                {
                    image:"/static/media/image/8.jpg",
                    title:"东北珍珠米",
                    price:"￥55",
                    sellnum: 564
                },

                {
                    image:"/static/media/image/9.jpg",
                    title:"油光桃",
                    price:"￥39.9",
                    sellnum: 879
                },
            ]
        }
    }
        colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
        items = this.colors.map((color, index) => (
            <Swiper.Item key={index}>
                <div>
                    <img src={require("../asset/img/" + (index == "5" ? "0": (index+1)) + ".jpg").default} alt=""/>
                </div>
            </Swiper.Item>
        ))

        render()
        {
            return (
                <div className={"mainApp"}>
                    <Header/>
                    <div className={"middle"}>
                        {/* eslint-disable-next-line react/jsx-no-undef */}
                        <Swiper autoplay className={"d"}>{this.items}</Swiper>
                        <div className={"goodsDiv"}>
                            {
                                this.state.goods.map((good,index)=>
                                    <div className={"goodsItem"}>
                                        <img src={good.image} alt=""/>
                                        <span>
                                            <span className={"title"}>{good.title}</span>
                                             <br/> <br/> <br/>
                                            <span className={"price"}>{good.price}</span>
                                            <br/> <br/> <br/>
                                            <span className={"sell"}>销量：{good.sellnum}</span>
                                        </span>
                                    </div>
                                )}
                        </div>
                    </div>
                    <Bottom history={this.props.history}/>
                </div>
            )
        }

}

export default App;